<template>
    <div class="container">
        <!-- <h1>我是前台nav页（导航）</h1> -->
        <div class="nav">
            <div class="weblist">
                <div class="left">
                    <p>推荐</p>
                </div>
                <div class="right">
                    <div class="web"><a href="https://www.diunal.com/" target="_blank">丢哪了</a></div>
                    <div class="web"><a href="https://www.xunwuqishi.com/" target="_blank">寻物启事网</a></div>
                    <div class="web"><a href="https://m.swzl.com/" target="_blank">失物招领网</a></div>
                    <div class="web"><a href="http://www.sefd.net/" target="_blank">失而复得网</a></div>
                    <div class="web"><a href="http://www.dxsfwpt.com:8080/" target="_blank">大学生失物招领服务平台</a></div>
                    <div class="web"><a href="http://www.mmissing.com/" target="_blank">米西寻找</a></div>
                    <div class="web"><a href="http://www.51guashi.cn/" target="_blank">挂失网</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>上海</p>
                </div>
                <div class="right">
                    <div class="web"><a href="http://swzl.eastday.com/" target="_blank">上海失物招领服务平台</a></div>
                    <div class="web"><a href="https://gaj.sh.gov.cn/shga/vZswwh/index" target="_blank">上海市公安局赃物、失物招领平台</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>深圳</p>
                </div>
                <div class="right">
                    <div class="web"><a href="http://www.sw-zl.com/" target="_blank">深圳失物招领网</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>新疆</p>
                </div>
                <div class="right">
                    <div class="web"><a href="http://www.xjswzl.com.cn/" target="_blank">新疆失物招领网</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>四川</p>
                </div>
                <div class="right">
                    <div class="web"><a href="https://m.xunwuqishi.com/" target="_blank">四川失物招领</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>沈阳</p>
                </div>
                <div class="right">
                    <div class="web"><a href="http://www.syswzl.com/" target="_blank">沈阳失物招领网官网</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>重庆</p>
                </div>
                <div class="right">
                    <div class="web"><a href="http://life.cqnews.net/node_113867.htm" target="_blank">重庆失物招领网上服务平台</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>太原</p>
                </div>
                <div class="right">
                    <div class="web"><a href="http://tyswzlw.com/" target="_blank">太原失物招领网</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>武汉</p>
                </div>
                <div class="right">
                    <div class="web"><a href="http://gaj.wuhan.gov.cn/yxwp/" target="_blank">武汉市拾遗物品招领网</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>大连</p>
                </div>
                <div class="right">
                    <div class="web"><a href="http://www.shijinbumei.com/" target="_blank">大连拾金不昧网</a></div>
                </div>
            </div>

            <div class="weblist">
                <div class="left">
                    <p>淄博</p>
                </div>
                <div class="right">
                    <div class="web"><a href="https://gaj.zibo.gov.cn/FWZX/ShiWuZhaoLing.aspx" target="_blank">淄博市公安局失物招领</a></div>
                </div>
            </div>

            <div class="footer">
                <p>此页面不定时更新中，以上为"千寻"物品找回平台收集整理。</p>
                <p>如有遗漏或需补充，欢迎投稿补充：905421868@qq.com，感谢您的支持！</p>
                
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        toNewWindow() {
            const url="https://www.diunal.com"
            window.open(url)
        }
    },
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    animation: scale 0.5s linear 1 forwards;

    @keyframes scale {
        0% {
            // transform: scale(0);  // 大小
            opacity:0;
        }
        100%{
            // transform: scale(1);  // 大小
            opacity:1;
        }
    }
    .nav{
        width: 70%;
        height: auto;
        // border: #777777 solid 1px;
        // box-sizing: border-box;
        background: white;
        .weblist{
            padding: 10px 0;
            display: flex;
            flex-direction: row;
            // background: palegreen;
            border-bottom: #EEEEEE 1px solid;
            .left{
                width: 15%;
                p{
                    text-align: center;
                    line-height: 30px;
                }
            }
            .right{
                width: 85%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                // line-height: 200px;
                .web {
                    line-height: 30px;
                    margin-right: 30px;
                    margin-bottom: 5px;
                    padding: 0 5px;
                    // border: solid 1px salmon;
                    a{
                        text-decoration: none;
                        color: #777777;
                        font-weight: 500;
                        // padding: 0 30px 0 0;
                    }
                }
                .web:hover{
                    cursor: pointer;
                    background: #F2F2F2;
                }
            }
        }

        .footer{
            padding: 10px 0;
            text-align: center;
            font-size: 0.8em;
        }
    }
}
</style>